<template>
    <section class="add-container wrapper">

        <el-row :gutter="20">
            <el-col :span="18" class="cms-form-box">

                <el-form :inline="false" :model="form" ref="form" :rules="rules" v-loading="loading" label-width="120px" class="cms-form">

                    <el-form-item label="文章标题" prop="title" >
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>

                    <el-row :gutter="16">
                        <el-col :span="16">
                            <el-form-item label="简短标题">
                                <el-input v-model="form.shortTitle"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="标题颜色" label-width="100px">
                                <el-color-picker v-model="form.color"></el-color-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label-width="30px">
                                <el-checkbox v-model="form.bold">是否加粗</el-checkbox>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="21">
                            <el-form-item label="Tag标签">
                                <el-select v-model="form.tag" multiple placeholder="请选择" style="width: 100%">
                                    <el-option
                                            v-for="item in tagOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-button @click="createTag">创建标签</el-button>
                        </el-col>
                    </el-row>

                    <el-form-item label="摘要">
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 3, maxRows: 3}"
                                placeholder="请输入内容"
                                v-model="form.remarks">
                        </el-input>
                    </el-form-item>

                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="作者">
                                <el-input v-model="form.type"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="来源">
                                <el-input v-model="form.type"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="来源地址">
                                <el-input v-model="form.type"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="发布时间">
                                <el-date-picker
                                        v-model="form.publish"
                                        type="datetime"
                                        placeholder="选择日期时间"
                                        style="width: 100%"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="归档日期">
                                <el-date-picker
                                        v-model="form.store"
                                        type="date"
                                        placeholder="选择日期"
                                        style="width: 100%"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="浏览权限">
                                <el-checkbox v-model="form.visit">普通用户</el-checkbox>
                                <el-checkbox v-model="form.visit">高级组</el-checkbox>
                                <el-checkbox v-model="form.visit">VIP</el-checkbox>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="内容类型">
                                <el-select v-model="form.tag" placeholder="请选择" style="width: 100%">
                                    <el-option
                                            v-for="item in tagOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="指定模板">
                                <el-select v-model="form.tag" placeholder="请选择" style="width: 100%">
                                    <el-option
                                            v-for="item in tagOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="手机模板">
                                <el-select v-model="form.tag" placeholder="请选择" style="width: 100%">
                                    <el-option
                                            v-for="item in tagOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="是否收费">
                        <el-checkbox v-model="form.visit">免费</el-checkbox>
                        <el-checkbox v-model="form.visit">收费</el-checkbox>
                        <el-checkbox v-model="form.visit">打赏</el-checkbox>
                    </el-form-item>

                    <el-form-item label="附件">
                        <el-button type="primary" size="small">批量上传</el-button>
                    </el-form-item>

                    <el-form-item label="多媒体">
                        <el-button type="primary" size="small">批量上传</el-button>
                    </el-form-item>



                    <!--------------------------------------------------------------->
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="活动形式">
                                <el-input v-model="form.type"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="活动形式">
                                <el-input v-model="form.type"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="活动形式">
                                <el-input v-model="form.type"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="活动形式">
                        <el-input v-model="form.type"></el-input>
                    </el-form-item>

                </el-form>

            </el-col>

            <el-col :span="6">

                <el-row class="margin-bottom-10">
                    <el-col>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span class="card-header"><i class="el-icon-search"></i> 发布</span>
                            </div>
                            <el-row class="publish-card">
                                <el-col>

                                    <el-row class="margin-bottom-5">
                                        <el-col>
                                            <span class="text">状&nbsp;&nbsp;&nbsp;态：</span>
                                            <el-select v-model="form.tag" placeholder="请选择" size="small">
                                                <el-option
                                                        v-for="item in tagOptions"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-col>
                                    </el-row>

                                    <el-row class="margin-bottom-5">
                                        <el-col>
                                            <span class="text">公开度：</span>
                                            <el-select v-model="form.tag" placeholder="请选择" size="small">
                                                <el-option
                                                        v-for="item in tagOptions"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-col>
                                    </el-row>

                                    <el-row class="margin-bottom-10">
                                        <el-col>
                                            <span class="text"> 立即发布</span>
                                            <el-button plain size="mini">修改</el-button>
                                        </el-col>
                                    </el-row>

                                    <el-row class="footer">
                                        <el-col>
                                            <el-button type="primary" size="small" icon="el-icon-search">发布</el-button>
                                            <el-button plain type="info" size="small">保存草稿</el-button>
                                            <el-button plain type="info" size="small">预览</el-button>
                                        </el-col>
                                    </el-row>

                                </el-col>
                            </el-row>

                        </el-card>
                    </el-col>
                </el-row>

                <el-row class="margin-bottom-10">
                    <el-col>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>分类</span>
                            </div>
                            <div v-for="o in 4" :key="o" class="text item">
                                {{'列表内容 ' + o }}
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <el-row class="margin-bottom-10">
                    <el-col>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>标签</span>
                            </div>
                            <div v-for="o in 4" :key="o" class="text item">
                                {{'列表内容 ' + o }}
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

            </el-col>
        </el-row>


        <back-to-top></back-to-top>
    </section>
</template>

<script>
    import valid from '@/rules'
    import BackToTop from "../../../components/BackToTop/index";

    const tagOptions = [{
        value: '选项1',
        label: '黄金糕'
    }, {
        value: '选项2',
        label: '双皮奶'
    }, {
        value: '选项3',
        label: '蚵仔煎'
    }, {
        value: '选项4',
        label: '龙须面'
    }, {
        value: '选项5',
        label: '北京烤鸭'
    }]

    export default {
        components: {BackToTop},
        name: 'add',
        data() {
            let required = valid.required('此项必填')
            return {
                loading: false,
                tagOptions,
                /**
                 * channelId
                 */
                params: this.$route.query, //前一个页面带过来的数据
                form: {
                    title: null,
                },
                rules: {
                    title: [required]
                }
            }
        },
        methods: {
            createTag() { //创建标签

            }
        },
        created() {
            this.$store.dispatch('SetSidebar', false)   //收起侧边栏
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .wrapper{
        padding: 0 10px;
        transition: all .2s ease-in-out;
        .cms-form-box{
            border: 1px solid #e9eaec;
            background: #fff;
            border-radius: 4px;
            font-size: 14px;
            position: relative;
            transition: all .2s ease-in-out;
            padding: 20px 0;
            .cms-form{
                width: 95%;
            }
        }
    }

    .box-card{
        .card-header{
            font-weight: bold;
            font-size: 14px;
        }
        .publish-card{
            .text{
                display: inline-block;
            }
            .footer{
                width: 100%;
                text-align: right;
                border-top: 1px solid #e9eaec;
                padding-top: 10px;
            }
        }
    }



</style>